<template>
	<view class="home-page">
		<!-- 顶部导航栏（红金主题适配） -->
		<view class="top-nav">
			<!-- <view class="tab-top">
    		<view class="nav-tab" :class="{ active: currentTab === 'self' }" @click="currentTab = 'self'">自取</view>
    		<view class="nav-tab" :class="{ active: currentTab === 'delivery' }" @click="currentTab = 'delivery'">外卖</view>
    	</view> -->
			<view class="tab-top">

				<view class="nav-tab1" :class="{ active: currentTab === 'self' }" @click="currentTab = 'self'">自取</view>
				<view class="nav-tab1" :class="{ active: currentTab === 'delivery' }" @click="currentTab = 'delivery'">外卖</view>
			</view>
			<!-- <view class="tab-search"></view> -->
			<view class="search-icon">
				<u-icon name="search" size="24" color="#000000"></u-icon>
			</view>
		</view>

		<!-- 轮播图区域（优化渐变覆盖） -->
		<swiper class="banner-swiper" circular autoplay :interval="3000" :duration="500">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image :src="item.image" mode="widthFix" class="banner-img"></image>
			</swiper-item>
		</swiper>

		<!-- 店铺信息区域（红金主题重构） -->
		<view class="store-info">
			<view class="store-header">
				<text class="star-icon">★</text>
				<text class="store-title">观澜老街店</text>
				<u-icon name="arrow-right" size="20" class="arrow-icon"></u-icon>
			</view>
			<view class="store-meta">
				<text class="make-tag">下单立即制作</text>
				<text class="divider">|</text>
				<text class="distance-tag">距离您536m</text>
			</view>
			<view class="coupon-list">
				<text class="coupon-item" v-for="(coupon, idx) in couponList" :key="idx">{{ coupon }}</text>
			</view>
		</view>

		<!-- 活动横幅（保持简洁，可替换为动态数据） -->
		<image src="/static/images/activity-banner.png" mode="widthFix" class="activity-banner"></image>
		
		<view class="parent">
			<view class="category-nav">
					<view class="category-item" v-for="(category, cIdx) in categoryList" :key="cIdx">
						<image :src="category.icon" mode="widthFix" class="category-icon"></image>
						<text class="category-text">{{ category.text }}</text>
					</view>
			</view>
			<view class="goods-list">
				<view class="goods-item" v-for="(goods, gIdx) in goodsList" :key="gIdx" @touchstart="handlePress(goods, $event)"
					@touchend="handleRelease">
					<image :src="goods.image" mode="widthFix" class="goods-img"></image>
					<view class="goods-info">
						<text class="goods-name">{{ goods.name }}</text>
						<view class="tags">
							<text class="tag" v-for="(tag, tIdx) in goods.tags" :key="tIdx">{{ tag }}</text>
						</view>
						<text class="desc">{{ goods.desc }}</text>
						<view class="price">
							<text class="current-price">¥{{ goods.currentPrice }} 到手价</text>
							<text class="original-price" v-if="goods.originalPrice">¥{{ goods.originalPrice }} 起</text>
						</view>
						<u-icon ref="addIcon" name="plus" size="32" class="add-icon" @click="handleAdd(goods)"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 左侧分类导航（红金主题优化） -->
		<!-- <view class="category-nav">
				<view class="category-item" v-for="(category, cIdx) in categoryList" :key="cIdx">
					<image :src="category.icon" mode="widthFix" class="category-icon"></image>
					<text class="category-text">{{ category.text }}</text>
				</view>
		</view> -->


		<!-- 商品列表区域（交互增强） -->
		<!-- <view class="goods-list">
			<view class="goods-item" v-for="(goods, gIdx) in goodsList" :key="gIdx" @touchstart="handlePress(goods, $event)"
				@touchend="handleRelease">
				<image :src="goods.image" mode="widthFix" class="goods-img"></image>
				<view class="goods-info">
					<text class="goods-name">{{ goods.name }}</text>
					<view class="tags">
						<text class="tag" v-for="(tag, tIdx) in goods.tags" :key="tIdx">{{ tag }}</text>
					</view>
					<text class="desc">{{ goods.desc }}</text>
					<view class="price">
						<text class="current-price">¥{{ goods.currentPrice }} 到手价</text>
						<text class="original-price" v-if="goods.originalPrice">¥{{ goods.originalPrice }} 起</text>
					</view>
					<u-icon ref="addIcon" name="plus" size="32" class="add-icon" @click="handleAdd(goods)"></u-icon>
				</view>
			</view>
		</view> -->

		<!-- 底部提示 -->
		<view class="bottom-tip">
			{{ bottomTipText }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'self', // self:自取  delivery:外卖
				bannerList: [{
						image: '/static/banners/banner01.png'
					},
					{
						image: '/static/banners/banner02.png'
					},
					{
						image: '/static/banners/banner03.png'
					}
				],
				couponList: ['云岭茉莉白*中 9.9元喝', '云深幽兰11.9元喝'],
				categoryList: [{
						icon: '/static/images/recommend.png',
						text: '古茗推荐'
					},
					{
						icon: '/static/images/star.png',
						text: '星穹铁道联名套餐'
					},
					{
						icon: '/static/images/milk-tea.png',
						text: '原叶·鲜奶茶'
					},
					{
						icon: '/static/images/fruit.png',
						text: '现榨·果蔬'
					},
					{
						icon: '/static/images/recommend.png',
						text: '古茗推荐'
					},
					{
						icon: '/static/images/star.png',
						text: '星穹铁道联名套餐'
					},
					{
						icon: '/static/images/milk-tea.png',
						text: '原叶·鲜奶茶'
					},
					{
						icon: '/static/images/fruit.png',
						text: '现榨·果蔬'
					},
					{
						icon: '/static/images/milk-tea.png',
						text: '原叶·鲜奶茶'
					},
					{
						icon: '/static/images/fruit.png',
						text: '现榨·果蔬'
					}

				],
				goodsList: [{
						image: '/static/goods/good01.png',
						name: '云深幽兰',
						tags: ['11.9元活动', '限2杯', '重磅新品', '香草'],
						desc: '甄选锡兰红茶，幽扬茶香交融奶香，搭配香草奶芙，口感超丰富',
						currentPrice: '11.9',
						originalPrice: '14.9'
					},
					{
						image: '/static/goods/good02.png',
						name: '云岭茉莉白',
						tags: ['9.9元活动', '限2杯', '年度销量第一'],
						desc: '甄选茉莉鲜花多次窨制，花香入茶骨，搭配冷藏牛乳，回味悠长',
						currentPrice: '9.9',
						originalPrice: '13'
					},
					{
					  image: '/static/goods/good02.png',
					  name: '云岭茉莉白',
					  tags: ['9.9元活动', '限2杯', '年度销量第一'],
					  desc: '甄选茉莉鲜花多次窨制，花香入茶骨，搭配冷藏牛乳，回味悠长',
					  currentPrice: '9.9',
					  originalPrice: '13'
					},
					{
					  image: '/static/goods/good02.png',
					  name: '云岭茉莉白',
					  tags: ['9.9元活动', '限2杯', '年度销量第一'],
					  desc: '甄选茉莉鲜花多次窨制，花香入茶骨，搭配冷藏牛乳，回味悠长',
					  currentPrice: '9.9',
					  originalPrice: '13'
					},
				],
				bottomTipText: '云深幽兰11.9元喝，今日可享受1单',
				pressTimer: null // 长按防抖定时器
			}
		},
		methods: {
			handleAdd(goods) {
				console.log('添加商品到购物车', goods);
				// 按钮缩放反馈
				this.$refs.addIcon.scale = 0.9;
				setTimeout(() => {
					this.$refs.addIcon.scale = 1;
				}, 200);
			},
			handlePress(goods, e) {
				// 长按逻辑（可选：如显示商品详情）
				this.pressTimer = setTimeout(() => {
					console.log('长按商品', goods);
					// 可触发弹窗或路由跳转
				}, 500);
			},
			handleRelease() {
				clearTimeout(this.pressTimer);
			}
		}
	}
</script>

<style scoped>
	/* 全局红金主题适配 */
	.home-page {
		background-color: #fff;
		height: 100%;
		/* min-height: 100vh; */
		/* 顶部渐变背景，模拟参考图氛围 */
		background: linear-gradient(to bottom, #b92b27 0%, #fff 200rpx);
	}

	/* 顶部导航栏 */
	/* 顶部导航 */
	.top-nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 40rpx;
		left: 20rpx;
		/* width: 100%; */
		z-index: 100;
		align-items: center;
		/* margin: 2rem 2rem 2rem 2rem; */
		/* padding: 10rpx 10rpx 10rpx 10rpx; */
		/* background-color: #fff; */
		/* border-bottom: 1px solid #f5f5f5; */
	}

	.tab-top {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 160rpx;
		border-radius: 66rpx;
		margin-right: 10rpx;
		height: 50rpx;
		padding: 5rpx;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.nav-tab1 {
		text-align: center;
		line-height: 30px;
		height: 50rpx;
		width: 80rpx;
		font-size: 0.6rem;
		border-radius: 50rpx;
		transition: .5s all;
		/* color: #fff; */
		/* background-color: #000000; */
	}

	.nav-tab {
		font-size: 32rpx;
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}

	.nav-tab1.active {
		background-color: #000000;
		color: #fff;
	}

	.search-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60rpx;
		height: 60rpx;
		/* margin-left: 100rpx; */
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.5);
		margin-left: auto;
		margin-right: 20rpx;
	}

	/* 轮播图 */
	.banner-swiper {
		height: 380rpx;
		/* 增加高度，适配主题 */
	}

	.banner-img {
		width: 100%;
		height: 100%;
	}

	/* .uni-swiper-dots uni-swiper-dots-horizontal{
	bottom: 20px;
} */

	/* 店铺信息 */
	.store-info {
		position: relative;
		margin: -30rpx 0 0;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.store-header {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #b92b27;
	}

	.make-tag {
		background-color: #d5e878;
		border-radius: 5rpx;
		padding: 5rpx;
		font-size: 1rem;
	}

	.distance-tag {
		color: #999b9c;
	}

	.star-icon {
		color: #ffd700;
		margin-right: 8rpx;
		font-size: 28rpx;
	}

	.arrow-icon {
		margin-left: auto;
		color: #999;
		transition: all 0.3s;
	}

	.arrow-icon:hover {
		transform: translateX(5rpx);
	}

	.store-meta {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
		font-size: 26rpx;
		color: #666;
	}

	.divider {
		margin: 0 6rpx;
		color: #ccc;
	}

	.coupon-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 16rpx;
	}

	.coupon-item {
		background-color: #fff0f0;
		color: #b92b27;
		padding: 8rpx 18rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin-right: 12rpx;
		margin-top: 10rpx;
		box-shadow: 0 2rpx 6rpx rgba(185, 43, 39, 0.1);
		transition: all 0.3s;
	}

	.coupon-item:hover {
		transform: scale(1.05);
	}

	/* 活动横幅 */
	.activity-banner {
		width: 100%;
		height: auto;
		margin: 20rpx;
		border-radius: 12rpx;
	}
	
	.parent{
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		/* background-color: red; */
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	/* 左侧分类导航 */
	.category-nav {
		height: 100%;
		width: 160rpx;
		min-height: 500rpx;
		/* width: 160rpx;
		background-color: #fff;
		float: left;
		min-height: 500rpx;
		padding: 20rpx 0;
		margin-left: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03); */
	}

	.category-item {
		display: flex;
		width: 160rpx;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 10rpx;
		border-radius: 12rpx;
		transition: all 0.3s;
	}

	.category-item:active {
		background-color: #fef2f2;
	}

	.category-icon {
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 8rpx;
	}

	.category-text {
		font-size: 24rpx;
		color: #333;
	}

	/* 商品列表 */
	.goods-list {
		/* margin-left: 180rpx; */
		padding: 20rpx;
	}

	.goods-item {
		display: flex;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f5f5f5;
		transition: all 0.3s;
	}

	.goods-item:active {
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.goods-img {
		width: 480rpx;
		height: 480rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
		color: #b92b27;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 8rpx;
	}

	.tag {
		background-color: #fef2f2;
		color: #b92b27;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		font-size: 22rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
		line-height: 40rpx;
	}

	.price {
		display: flex;
		align-items: baseline;
		margin-bottom: 10rpx;
	}

	.current-price {
		font-size: 30rpx;
		color: #e60012;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.original-price {
		font-size: 26rpx;
		color: #999;
		text-decoration: line-through;
	}

	.add-icon {
		color: #3cc51f;
		margin-left: auto;
		transition: all 0.3s;
	}

	.add-icon:active {
		transform: scale(0.9);
	}

	/* 底部提示 */
	.bottom-tip {
		position: fixed;
		width: 100%;
		bottom: 3rem;
		z-index: 100;
		text-align: center;
		padding: 20rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #f8f8f8;
	}
</style>